<template>
	<view class="content">
		<Header :title="'分享码'" :name="false"></Header>
		<!-- <view class="">
	<scroll-view class="scrollBox" @scrolltolower="ReachBottom" scroll-y="true" show-scrollbar="false">
		<view class="" style="height: 20rpx;"></view>
		<swiper :indicator-dots="true" class="swpier_box" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image class="swpier_box" src="../../static/shopBaner.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swpier_box"
					src="http://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/2023/12/26/24f7b90355ea496e9f7be9918b2ab346.png"
					mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="swiperBig">
			<image @click="qiehuan(2)" src="../../static/my/lelft1.png" mode="aspectFill"
				style="width: 30rpx;height: 99rpx;margin-right: 30rpx;"></image>
			<swiper v-if="productList.length>0" class="swiperBox" :current='current'
				:display-multiple-items='multipleNum' :interval="3000" :duration="1000">
				<swiper-item v-for="(item,i) in productList">
					<view @click="selectItem(item,i)" :class="swiperCont==i ? 'swiper-item1':'swiper-item'">
						<image class="shopImg" :src="item.coverPictureId" mode="aspectFill"></image>
						<view class="shopName">
							{{item.title}}
						</view>
					</view>
				</swiper-item>
			</swiper>
			<image @click="qiehuan(1)" src="../../static/my/right1.png" mode="aspectFill"
				style="width: 30rpx;height: 99rpx;margin-left: 30rpx;"></image>
		</view>
		<view class="btn" @click="goDetails()">
			立即购买
		</view>
		<view class="shop_title">优选商品</view>
	
		<view class="shop_box">
			<view class="shop_sun" v-for="item in productList" @click="goToDetails(item)">
				<image class="cardImg" :src="item.coverPictureId" mode="aspectFill"></image>
				<view class="cardMain">
					<view class="cardName">
						{{item.title}}
					</view>
					<view class="unitPrice">
						￥{{item.unitPrice}}
					</view>
				</view>
			</view>
			<view class="loadmoreBox">
				<u-loadmore :status="status" :icon-type="iconType" />
			</view>
		</view>
	</scroll-view>
</view> -->
<view v-if="!image"> 
	<u-loading-page :loading="true"></u-loading-page>
</view>
		<view class="img_box" v-else>
			<image style="width: 100vh;height: 100vh;position: absolute;z-index: 1;"
				src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E7%9F%A9%E5%BD%A2%2010%EF%BC%88%E5%90%88%E5%B9%B6%EF%BC%89%403x.png"
				mode=""></image>
				<image :src="image" mode="aspectFill" class="codeImg"></image>
		</view>
		
		<view class="zhuanfaCode" @click="saveImg">
			保存邀请码
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				swiperCont: 0,
				swperList: [],
				current: 0,
				productList: [],
				id: '',
				multipleNum: '2',
				pageSize: 10,
				pageNum: 1,
				total: 0,

				status: 'loadmore',
				iconType: 'flower',
				image: '',
				access_token:''
			}
		},
		onLoad() {

		},
		components: {
			Header
		},
		created() {
			this.getProductList()
			// this.zhuanfa()
			this.getAccessToken()
		},
		methods: {
			saveImg() { //保存到相册
			let  that  = this 
				// 图片是base64
				 let base64=this.image.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
				 let filePath=wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
					uni.getFileSystemManager().writeFile({
							filePath:filePath ,  //创建一个临时文件名
							data: base64,
							encoding: 'base64',  //写入当前文件的字符编码
							success: res => {
									uni.saveImageToPhotosAlbum({
											filePath: filePath,
											success: function(res2) {
													uni.showToast({
															title: '保存成功，请从相册选择再分享',
															icon:"none",
															duration:5000
													})
													that.show=false
											},
											fail: function(err) {
													uni.showToast({
														title: '下载失败',
														icon: 'none'
													});
											}
									})
							},
							fail: err => {
									//console.log(err)
									uni.showToast({
										title: '下载失败',
										icon: 'none'
									});
							}
					})
				
			},
		async	getAccessToken() {
						// let that = this
						// uni.request({
						// 	// https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的APPID&secret=你的微信小程序密钥
						// 	url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx213922521c5ba1fb&secret=8ed7d252f400d87557d585da441c5978',
						// 	method: "GET",
						// 	success(res) {
						// 		that.access_token = res.data.access_token
						// 		that.zhuanfa()
						// 	},
						// 	fail(err) {
						// 		console.log(err)
						// 	}
						// })
						let res = await this.$api.request('farmer/foster/qRCode', 'get',{
							fosterId: '0',
							shareId: uni.getStorageSync('shareId'),
							page:'pages/home'
						})
								
								this.image = `data:image/jpeg;base64,${res.data}`
						
					},
			zhuanfa() {
				// let that = this
				// uni.request({
				// 	url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${that.access_token}`,
				// 	responseType: "arraybuffer",
				// 	method: "POST",
				// 	data: {
				// 		// 更多参数请看官方文档
				// 		"page": "pages/home", // 默认是主页，页面 page
				// 		"scene": "shareId=" + uni.getStorageSync('shareId'), // 参数
				// 		"check_path": false, // 默认是true，检查page 是否存在
				// 		"env_version": "trial" // 要打开的小程序版本。正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版。
				// 	},
				// 	success(res) {
				// 		// 该接口返回的是 图片二进制 数据
				// 		const arrayBuffer = new Uint8Array(res.data)
				// 		const base64 = wx.arrayBufferToBase64(arrayBuffer)
				// 		that.image = `data:image/jpeg;base64,${base64}`
				// 	},
				// 	fail(err) {
				// 		console.log(err)
				// 	}
				// })
			},
			qiehuan(e) {
				if (e == 1) {
					if (this.productList.length > 2) {
						let number = this.productList.length
						if (this.productList.length % 2 != 0) {
							number = number + 1
						}
						if ((this.current + 1) * 2 < number) {
							this.current++
						}
						console.log(this.current * 2, number)
					}
				} else {
					this.current--
					if (this.current < 0) {
						this.current = 0
					}
				}
			},
			async ReachBottom() {
				let that = this;
				console.log('触发了')
				if (this.productList.length == this.total || this.productList.length > this.total) {
					this.status = 'nomore'
					return; //没有更多数据时  中止执行后续代码
				}
				console.log('触发了')

				this.status = 'loading'; //设置触底加载组件状态 为正在加载
				this.pageNum = ++this.pageNum; //请求下一页

				that.getProductList(); //请求的接口数据
				if (this.productList.length == this.total) {
					this.status = 'nomore'
				} else {
					this.status = 'loading'
				};

			},
			async getProductList() { //商品列表
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await this.$api.request('manage/product/list', 'get', params)
				this.id = res.data.list[0].id
				if (this.pageNum != 1) {
					this.productList.push(...res.data.list)
				} else {
					this.productList = res.data.list
				}
				this.total = res.total

				if (this.pageNum == 1) { //只拿第一页前6个数据作为轮播图数据
					this.swperList = res.data.list.slice(0, 6)
				}



			},

			goDetails() { //轮播图商品详情
				uni.navigateTo({
					url: '/pages/index/shopDate/shopDate?id=' + this.id
				})
			},
			//优选商品详情
			goToDetails(item) {
				uni.navigateTo({
					url: '/pages/index/shopDate/shopDate?id=' + item.id
				})
			},
			selectItem(item, i) {
				this.swiperCont = i
				this.id = item.id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zhuanfaCode{
		height: 98rpx;
		border-radius: 100rpx;
		width: 80%;
		background: linear-gradient(-49deg, #FE471E, #D40101);
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		line-height: 98rpx;
		font-weight: bold;
		position: fixed;
		bottom: 10%;
		z-index: 89999;
		left: 10%;
	}
	.codeImg{
		width: 550rpx;
		height: 550rpx;
		position: absolute;
		top: 18%;
		left: 100rpx;
		z-index: 9999;
	}
	.img_box{
		width: 100vh;
		height: 100vh;
		position: relative;
	}
	.shop_box {
		display: flex;
		flex-wrap: wrap;
		padding: 0 86rpx 150rpx;
		box-sizing: border-box;
		width: 100%;

	}

	.loadmoreBox {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.scrollBox {
		width: 100%;
		height: 100vh;
	}

	.shop_sun {
		width: 266.7rpx;
		background-color: #F7F8FC;
		box-shadow: 0rpx 7rpx 8rpx 5rpx rgba(153, 153, 153, 0.3);
		border-radius: 20rpx;
		margin-right: 43rpx;
		margin-top: 25rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		&:nth-child(2n) {
			margin-right: 0rpx;
		}

		.cardImg {
			width: 203rpx;
			height: 203rpx;
			margin: 24rpx 32rpx 28rpx;
		}

		.cardMain {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			padding: 0 29rpx;
			box-sizing: border-box;

			.cardName {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;

			}

			.unitPrice {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DC1010;

			}
		}

	}

	.shop_title {
		font-size: 36rpx;
		font-weight: 600;
		margin-top: 50rpx;
		margin-left: 52rpx;
		margin-bottom: 20rpx;
	}

	.btn {
		width: 211rpx;
		height: 55rpx;
		background-color: #CD3222;
		border-radius: 26rpx;
		text-align: center;
		line-height: 55rpx;
		color: #fff;
		margin: 0 auto;
		font-size: 30rpx;
		font-weight: 600;
	}

	.swiperBig {
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiperBox {
		width: 580rpx;
		height: 400rpx;
		margin-top: 30rpx;
	}

	.swiper-item3 {
		width: 500rpx;
		display: flex;
		justify-content: space-between;
	}

	.swiper-item {
		width: 267rpx;
		height: 346rpx;
		background: #FDF8F4;

		box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.shopImg {
			width: 135rpx;
			height: 188rpx;
			margin-left: 37rpx;
			margin-right: 33rpx;
		}

		.shopName {
			width: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #CD3222;
		}


	}


	.swiper-item1 {
		width: 267rpx;
		height: 346rpx;
		background: #CD3222;
		box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.shopImg {
			width: 135rpx;
			height: 188rpx;
			margin-left: 37rpx;
			margin-right: 33rpx;
		}

		.shopName {
			width: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

	}

	.swpier_box {
		width: 710rpx;
		height: 400rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}
</style>